<template>
	<view class="comers_video">
		<video 
		    v-if="videoDetail"
			class="video_detail"
			:src="videoDetail.url" 
			:title='videoDetail.title' 
			enable-play-gesture
			@play='playVideo'
			@pause='pauseVideo'
			@ended='endedVideo'
			></video>
		<view class="video_Introduc">
			<view>
				<text>{{videoDetail.title}}</text>
				<!-- <text>视频时长: {{ Math.floor( videoDetail.time / 60)}}m</text> -->
			</view> 
			<p>{{videoDetail.desc}}</p>
		</view>	
		
		<view class="video_return" @click="returnPrevious">
			<image class="return_img" src="../../../static/images/return.png" mode=""></image>
			<text class="return_tit">返回</text>
		</view>
	</view>
</template>
 
<script>
	import {
		taskDetails,
		finishedVideo
	} from "@/api/user";
	export default {
		data() {
			return {
				videoId: null,
				// 视频数据
				videoDetail:'',
				// 全局定时器
				timerVideo:'',
				// 播放时间
				time:0
			};
		},
		onLoad({id}) { 
			this.videoId = id
		},
		// 页面关闭
		onUnload(){ 
			this.time && this.finishedVideo() 
		},
		mounted() {
			 this.taskDetails()
		}, 
		onUnload(){ 
				let that = this 
				if(that.time < that.videoDetail.time){ 
					uni.showModal({
						title:'温馨提示',
						content: '视频还没有看完, 确认退出吗？',
						success(res) { 
							if(res.confirm){ 
								that.finishedVideo()
								uni.navigateTo({
									url: '../index'
								})
							} 
						}
					})
					return true
				} 
		},
		// onBackPress(){
		// 	let that = this
		// 	if(that.time < that.videoDetail.time){ 
		// 		uni.showModal({
		// 			title:'温馨提示',
		// 			content: '视频还没有看完, 确认退出吗？',
		// 			success(res) { 
		// 				if(res.confirm){ 
		// 					that.finishedVideo()
		// 					uni.navigateTo({
		// 						url: '../index'
		// 					})
		// 				} 
		// 			}
		// 		})
		// 		return true
		// 	} 
		// },
		methods:{ 
			// 播放 / 继续播放
			playVideo(){
				clearInterval(this.timerVideo )
				this.timerVideo = setInterval(() => {
					this.time += 1
				},1000)  
			},
			// 暂停播放时触发 
			pauseVideo(){
				// 暂停的时候 清除定时器
				clearInterval(this.timerVideo ) 
			},
			endedVideo(){
				this.finishedVideo()
			},
			// 数据请求
			taskDetails(){
				taskDetails(this.videoId).then(res => {
					if(res.status == 200){ 
						this.videoDetail = res.data  
					}else{ 
						this.$util.Tips({
							title: res.msg
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../index'
							})
						},1000)
					}
				})
			},
			// 记录播放时间
			finishedVideo(){
				finishedVideo(this.videoId, this.time) 
			},
			// 返回上一页
			returnPrevious(){  
				let that = this
				if(that.time < that.videoDetail.time){ 
					uni.showModal({
						title:'温馨提示',
						content: '视频还没有看完, 确认退出吗？',
						success(res) { 
							if(res.confirm){ 
								that.finishedVideo()
								uni.navigateTo({
									url: '../index'
								})
							} 
						}
					})
					return 
				}else{
					that.finishedVideo()
					uni.navigateTo({
						url: '../index'
					})
				} 
				 
			}
		}
	}
</script>

<style lang="less">
	.comers_video{
		letter-spacing: 4rpx;
		.video_detail{
			width: 98%;
			margin: 10rpx; 
			border-radius: 10rpx;
		}
		.video_Introduc{
			padding: 10rpx;
			min-height: 200rpx;
			background-color: #fff; 
			view {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx; 
				font-weight: 700;
				font-size: 36rpx;
				& text:last-child{
					font-size: 30rpx;
					font-weight: 400;
				}
			}
			p {
				
				text-indent: 2em;
				color: #8a8a8a;
				line-height: 44rpx;
			} 
		}
		.video_return{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 36rpx;
			color: #fff;
			font-weight: 700;
			text-align: center;
			border-radius: 20rpx;
			background-image: linear-gradient(to right, #f62c2c, #f96829);
			.return_img{ 
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
			}
			.return_tit{
				margin-left: 20rpx;
			}
		}
	}
</style>
